<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>修改</title>
  <link rel="stylesheet" href="../../static/css/bootstrap.4.3.1.min.js.css" th:href="@{/css/bootstrap.4.3.1.min.js.css}"/>
  <script th:src="@{/js/jquery-3.4.1.js}"></script>
  <link rel="stylesheet" href="../../static/css/layui.css" th:href="@{/css/layui.css}"/>
  <script th:src="@{/js/layui.js}"></script>
  <script th:src="@{/js/modules/layer.js}"></script>
  <style>
    li{
      list-style: none;
      margin: 15px;
    }
    .btn-block{
      width: 380px !important;
      margin: 0px 55px !important;
    }
  </style>
</head>
<body>
<div class="container">
  <h3 style="text-align: center">修改住户信息</h3>
  <form >
    <ul>
      <li>
        <input class="form-control" name="id" type="text" th:value="${user123.id}" readonly placeholder="ID">
      </li>
      <li>
        <input class="form-control" name="username" type="text" th:value="${user123.username}"  placeholder="请输入用户名">
      </li>
      <li>
        <input class="form-control" name="pwd" type="text" th:value="${user123.pwd}"  placeholder="请输入密码">
      </li>
      <li>
        <input class="form-control" name="houseNumber" type="text" th:value="${user123.houseNumber}"  placeholder="请输入门牌号">
      </li>
      <li>
        <input class="form-control" name="waterConsumption" type="text" th:value="${user123.waterConsumption}"  readonly placeholder="用水量">
      </li>
      <li>
        <input class="form-control" name="powerConsumption" type="text" th:value="${user123.powerConsumption}"  readonly placeholder="用电量">

      </li>
      <li>
        <input class="form-control" name="electricityPrice" type="text" th:value="${user123.electricityPrice}"  placeholder="请输入电价（元/度）">
      </li>
      <li>
        <input class="form-control" name="waterPrice" type="text" th:value="${user123.waterPrice}"  placeholder="请输入水价（元/吨）">
      </li>
      <li>
        <input class="form-control" name="totalCost" type="text" th:value="${user123.totalCost}"  readonly placeholder="总费用">

      </li>
    </ul>
    <button class="btn btn-primary btn-lg btn-block" onclick="click456()">保存</button>
  </form>
</div>
<script>
  //点击保存按钮，ajax前后交互传递数据
  function click456(){
    debugger
    var username=$("input[name='username']").val();
    var pwd=$("input[name='pwd']").val();
    var houseNumber=$("input[name='houseNumber']").val();
    var waterConsumption=$("input[name='waterConsumption']").val();
    var powerConsumption=$("input[name='powerConsumption']").val();
    var waterPrice=$("input[name='waterPrice']").val();
    var electricityPrice=$("input[name='electricityPrice']").val();
    var state=$("input[name='state']").val();
    var totalCost=$("input[name='totalCost']").val();
    var id=$("input[name='id']").val();

    if(username==""){//前端判断用户名、密码是否为空
      alert("用户名为空，请重新输入！")
    }else if(pwd==""){
      alert("密码为空，请重新输入！")
    }else if(state==""){
      alert("用户身份为空，请核对后重新输入！")
    }else {
      $.ajax({

        url: '/updateUser',//后台接口地址
        type:'get',//请求方式，一般为get、post
        dataType:'text',//表示返回的数据必s须为' '中填写的类型，否则：会走下面error对应的方法。 ajax返回：json、xml、html、text、script、jsonp这几种类型
        cache:false,
        async:false,
        data:{
          username:username,
          pwd:pwd,
          houseNumber:houseNumber,
          waterConsumption:waterConsumption,
          powerConsumption:powerConsumption,
          waterPrice:waterPrice,
          electricityPrice:electricityPrice,
          totalCost:totalCost,
          state:state,
          id:id
        },
        success:function (data) {
          debugger
          console.log(data.msg)
          debugger
          if(data=== "0"){
            alert("修改成功")
          }else{
            alert("修改失败")
          }
          parent.layer.closeAll();//关闭所有的弹窗
          parent.location.reload();
        },
        error:function () {
          alert("请求失败")
        }
      })
    }

  }
</script>
</body>
</html>